
<!-- 列表界面 -->
<div id="data-list">
	<div class="banner">
		<span class="base-blue-01 base-search iconfont icon-chazhaobiaodanliebiao" data-title='用户列表'>用户列表查询</span>
	</div>
	<div class="base-form"> 
		<form id="fa-search">
			<table class="base-table form search">
				<tr>
					<td class="td-bg" width="150">用户名</td>
					<td class="left padding-l">
						<input	class="base-input" id="userName">
					</td>
					<td class="td-bg" width="150">创建时间</td>
					<td class="left padding-l">
						<input	class="base-input base-date" id="createTime" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})">
					</td>
					<td class="center" rowspan="1" width="150">
						<button id="btn_search" type="button" class="base-btn base-bg-green" data-toggle="modal">查询</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div class="banner">
		<span class="base-blue-01 base-search iconfont icon-chazhaobiaodanliebiao">用户列表</span>
		<shiro:hasPermission name="sysUser:saveUser">
		<div id="toolbar" class="toolbar">
			<button id="btn_add" type="button" class="base-btn base-bg-blue" data-toggle="modal">新增</button>
		</div>
		</shiro:hasPermission>
	</div>
	<div id="list">
	<table class="list-table base-table">
		<thead>
			<tr>
				<th width="60">序号</th>
				<th>用户名</th>
				<th width="100">真实姓名</th>
				<th width="60">性别</th>
				<th width="90">是否可用</th>
				<th width="150">拥有角色</th>
				<th width="150">所属部门</th>
				<th width="120">创建时间</th>
				<th width="120">操作</th>
			</tr>
		</thead>
		<tbody id="datalist">
			
		</tbody>
		<script id="tradecent-template" type="text/x-handlebars-template">
	{{#each this}}
	<tr data-id="{{userId}}">
		<td><div class='base-wrap'>{{addOne @index}}</div></td>
		<td><div class='base-wrap left' title='{{userName}}'>{{userName}}</div></td>
		<td><div class='base-wrap'>{{roleName}}</div></td>
		<td><div class='base-wrap'>{{getSex sex}}</div></td>
		<td><div class='base-wrap'>{{isNot locked}}</div></td>
		<td><div class='base-wrap'>{{#each roles}}{{name}}、{{/each}}</div></td>
		<td><div class='base-wrap'>{{sysDept.name}}</div></td>
		<td><div class='base-wrap'>{{createTime}}</div></td>
		<td>
		<shiro:hasPermission name="sysUser:updateUser"><span class="oper-handle iconfont icon-bianji base-yellow update" title='修改用户' data-pkid={{userId}}></span></shiro:hasPermission>
		<shiro:hasPermission name="sysUser:deleteUser"><span class="oper-handle iconfont icon-shanchu base-red delete" title='删除用户' data-pkid={{userId}}></span></shiro:hasPermission>
		<shiro:hasPermission name="sysUser:detailUser"><span class="oper-handle iconfont icon-xiangqing base-blue detail" title='详情' data-pkid={{userId}}></span></shiro:hasPermission>
		<shiro:hasPermission name="sysUser:initPassword"><span class="oper-handle iconfont icon-zhongzhimima base-blue init" title='初始化密码' data-pkid={{userId}}></span></shiro:hasPermission>
		</td>
	</tr>
	{{/each}}		
	</script>
	</table>
	</div>
</div>
<!-- end列表界面 -->

<!-- 新增与详情页面 -->
<div id="data-form" class="data-form"  data-title='新增用户'>
	<form id="form">
		<table class="base-table form">
			<input type='hidden' name='userId'>
			<tr>
				<td class="td-bg" width="150">用户名</td>
				<td class="left"><input  name="userName"
					class="base-input validate require" id="checkUser" data-exp="w{2-20}"></td>
				<td width="150">电话号码</td>
				<td><input type="text" name="phoneNum"
					class="base-input validate" data-exp="m"></td>
			</tr>
			<tr>
				<td width="150">真实姓名</td>
				<td><input name="roleName"
					class="base-input validate"></td>
				<td class="td-bg" width="150">所属部门</td>
				<td class="padding-l"><select class="base-select validate require"  name="sysDeptIds" id="sysDeptIds" data-id="deptId"></select></td>
			</tr>
			<tr>
				<td class="td-bg" width="150">出生日期</td>
				<td class="left"><input name="brithday" class="base-input base-date validate require" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"></td>
				<td width="150">性别</td>
				<td>
					<select class="base-select"  name="sex">
						<option value="1">男</option>
						<option value="0">女</option>
					</select>
				</td>
			</tr>
			<tr>
				<td width="150">拥有角色</td>
				<td class="padding-l"><select class="base-select validate require"  name="rolesIds" id="roleIds" data-id="roleId"></select></td>
				<td width="150">是否锁定</td>
				<td>
					<select class="base-select validate require"  name="locked">
						<option value="false">否</option>
						<option value="true">是</option>
					</select>
				</td>
			</tr>
			<tr>
				<td width="150">备注</td>
				<td colspan="3">
					<textarea rows="" cols="" class="base-textarea" name="remark"></textarea> 
				</td>
				
			</tr>
		</table>
	</form>
	<div class="toolbar buttom-btn fixed_pos">
			<button id="btn_back" type="button" class="base-btn base-bg-yellow">
				返回</button>
			<button id="btn_save" type="button" class="base-btn base-bg-blue">
				保存</button>
	</div>
</div>
<!--end新增与详情页面-->
<script type="text/javascript">
	$(function() {
		$.baseEvent({
			ctx:'',
			param:['userName','createTime'],
			isPage:true,
			pageList_url:"/sysUser/pageList",
			form_url:'/sysUser/saveUser',
			data_list:'/route/sys/sys_userList',
			del_url:'/sysUser/delUser',
			findBy_url:'/sysUser/findUser',
			add_is_dialog:true
		});
		getDept();
		getRole();
		
		$("#datalist").on('click','.init',function(){
			var userId = $(this).data('pkid');
			layer.confirm('你确要初始化密码吗？', {
      		  btn: ['确定','取消']//按钮
      		}, function(){
				var my = {
						url : "/sysUser/getInitPassword",
                    	type:'get',
						para:{id:userId},
						callback : function(res) {
							layer.msg(res.message);
						}
				}
				$._NormalRequest(my);
      		})
		});
		
		 $("#checkUser").on('input',function(){
			var my = {
					url : "/sysUser/checkUser",
                	type:'get',
					para:{userName:$("#checkUser").val()},
					callback : function(res) {
						if(res.data){
							$('#checkUser').data("isUser",'false');
							layer.tips('此用户用户已存在，不能重复添加。',$("#checkUser"));
						}else{
							$('#checkUser').data("isUser",'true');
						}
					}
			}
			$._NormalRequest(my);
		})
	});
	//查找角色
	function getRole() {
		var my = {
				url : "/sysRole/queryAll",
            	type:'get',
				callback : function(res) {
					for (var i = 0; i < res.data.length; i++) {
						$("#roleIds").append(
								"<option value='"+res.data[i].roleId+"'>"
								      + res.data[i].name + "</option>");
					}
				}
		}
		$._NormalRequest(my);
	}
	
	//查找部门
	function getDept() {
		var my = {
				url : "/sysDept/findTopList",
            	type:'get',
				callback : function(res) {
					for (var i = 0; i < res.data.length; i++) {
						$("#sysDeptIds").append(
								"<option value='"+res.data[i].deptId+"'>"
								      + res.data[i].name + "</option>");
					}
				}
		}
		$._NormalRequest(my);
	}
	
</script>
